<template>
  <div>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="changeTimer"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  props:{
    startTimer:null,
    endTimer:null,
    zone:'Asia/Shanghai',
  },
  data() {
    return {
      value1: [this.startTimer ,this.endTimer],
      tempTime:[],
    }
  },
  mounted() {
  },
  methods: {
    changeTimer(e){
      if (this.value1.length === 2) {
        const startTimeStamp = this.timeZone(new Date(this.value1[0]).getTime(),this.zone); // 开始日期的时间戳
        const endTimeStamp = this.timeZone(new Date(this.value1[1]).getTime(),this.zone); // 结束日期的时间戳
        this.tempTime = [startTimeStamp,endTimeStamp]
      }
    },
    // 时区转换
    /**
     * time 传入时间戳
     * zone 传入时区
     * zone 时区是根据 IANA时区数据库 来转换的 需要去查询相应的IANA时区表 网站：https://www.timeanddate.com/time/map/
     * */
    timeZone(time,zone){
      const date = new Date(time);
      const options = {
        timeZone: zone, // 目标时区
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };
      const formattedDate = date.toLocaleString('en-US', options);
      // return formattedDate
      return new Date(formattedDate).getTime(); // 转换为时间戳

    },
  }
}
</script>
<style scoped lang="scss">
</style>
